<template>
  <div class="edp-home">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>接口总数</span>
            </div>
            <div class="edp-home-card-header-right">
              <!-- <el-tag>日</el-tag> -->
            </div>
          </div>
          <div class="edp-home-card-body">
            <span>{{this.cardData.statusMap.total}}</span>
            <!-- <div class="edp-home-card-body-txt">
              <span style="display: inline-block;margin-right: 40px; line-height: 1.5; ">
                启用
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="success">{{this.cardData.statusMap.enable}}</el-tag>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                停用
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="danger">{{this.cardData.statusMap.disable}}</el-tag>
                  </span>
                </div>
              </span>
            </div> -->
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12" style="display: inline-block">
                  启用
                  <span>
                    <el-tag type="success">{{this.cardData.statusMap.enable}}</el-tag>
                  </span>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  停用
                  <el-tag type="danger">{{this.cardData.statusMap.disable}}</el-tag>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>接口通信协议分布</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <div class="edp-home-card-body">
            <span>{{this.cardData.protocolMap.total}}</span>
            <!-- <div class="edp-home-card-body-txt">
              <span style="display: inline-block;margin-right: 40px; line-height: 1.5; ">
                HTTP
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="success">{{this.cardData.protocolMap.http}}</el-tag>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                WebService/WSDL
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="danger">{{this.cardData.protocolMap.ws}}</el-tag>
                  </span>
                </div>
              </span>
            </div> -->
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12" style="display: inline-block">
                  HTTP
                  <span>
                    <el-tag type="success">{{this.cardData.protocolMap.http}}</el-tag>
                  </span>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  WS
                  <el-tag type="danger">{{this.cardData.protocolMap.ws}}</el-tag>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>接口处理方式分布</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <div class="edp-home-card-body">
            <span>{{this.cardData.dealTypeMap.total}}</span>
            <!-- <div class="edp-home-card-body-txt">
              <span style="display: inline-block;margin-right: 40px; line-height: 1.5; ">
                同步处理
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="success">{{this.cardData.dealTypeMap.sync}}</el-tag>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                异步处理
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="danger">{{this.cardData.dealTypeMap.async}}</el-tag>
                  </span>
                </div>
              </span>
            </div> -->
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12" style="display: inline-block">
                  同步
                  <span>
                    <el-tag type="success">{{this.cardData.dealTypeMap.sync}}</el-tag>
                  </span>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  异步
                  <el-tag type="danger">{{this.cardData.dealTypeMap.async}}</el-tag>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>今日调用外部接口总次数</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <div class="edp-home-card-body">
            <span>{{this.cardData.apiLogMap.total}}</span>
            <!-- <div class="edp-home-card-body-txt">
              <span style="display: inline-block;margin-right: 40px; line-height: 1.5; ">
                成功
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="success">{{this.cardData.apiLogMap.success}}</el-tag>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                失败
                <div style="display: inline-block;margin-left: 10px;">
                  <span style="vertical-align: middle;">
                    <el-tag type="danger">{{this.cardData.apiLogMap.error}}</el-tag>
                  </span>
                </div>
              </span>
            </div> -->
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12" style="display: inline-block">
                  成功
                  <span>
                    <el-tag type="success">{{this.cardData.apiLogMap.success}}</el-tag>
                  </span>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  失败
                  <el-tag type="danger">{{this.cardData.apiLogMap.error}}</el-tag>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="padding-top: 8px" :gutter="10">
      <el-col :span="14">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>接口异常请求监控</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <div id="c2"></div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <!--  padding: '22px' -->
        <el-card class="edp-home-card" shadow="hover" :body-style="{ height:'440px' }">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>最近错误请求列表</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize :data="dataList">
            <vxe-table-column type="index" align="center" width="60"></vxe-table-column>
            <vxe-table-column field="apiName" title="接口名称" width="120">
              <template slot-scope="scope">
                <a @click="openErrLog('',scope.row.apiName)"> {{ scope.row.apiName}}</a>
              </template>
            </vxe-table-column>
            <vxe-table-column field="respStr" title="异常描述">
            </vxe-table-column>
            <vxe-table-column field="apiReqTime" title="异常时间" width="160">
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot'
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      activeNames: ['common'],
      dataList: [],
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/api/apiNotifyConf/page',
        getDataListIsPage: true,
        deleteURL: '/api/apiNotifyConf',
        deleteIsBatch: true
      },
      cardData: {
        statusMap: {
          total: 0,
          enable: 0,
          disable: 0
        },
        protocolMap: {
          total: 0,
          ws: 0,
          http: 0
        },
        dealTypeMap: {
          total: 0,
          ws: 0,
          http: 0
        },
        apiLogMap: {
          total: 0,
          success: 0,
          error: 0
        }
      },
      columnPlot: {}
    }
  },
  activated () {
    this.$nextTick(() => {
      this.getCardData()
      this.errList()
      this.errPlotData()
    })
  },
  created () {
    this.$nextTick(() => {
      this.createChart()
    })
  },
  methods: {
    // 新增 / 修改
    viewApi (row) {
      let title = '新增'
      let id
      if (row) {
        title = row.id
        id = row.id
      }
      // 打开路由
      var router = {
        name: 'api-apiConfView',
        id: '',
        menuId: this.$route.meta.menuId,
        oldName: 'api-apiConfList',
        path: 'api/apiConfView',
        title: '查看接口信息' + title
      }
      var params = {
        timestamp: this.$xeutils.timestamp(),
        id: id
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    getCardData () {
      var self = this
      this.$http.get(`/api/apiMonitor/getApiMonitorCardData`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.cardData = {
          ...self.cardData,
          ...res.data
        }
      }).catch(() => { })
    },
    errList () {
      this.$http.get(`/api/apiMonitor/getErrListTopTen`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.dataList = res.data
      }).catch(() => { })
    },
    errPlotData () {
      this.$http.get(`/api/apiMonitor/getErrTotalByDays?days=7`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.columnPlot.changeData(res.data)
      }).catch(() => { })
    },
    createChart () {
      var self = this
      this.columnPlot = new Column('c2', {
        forceFit: true,
        padding: 'auto',
        xField: 'date',
        yField: 'errNum',
        meta: {
          date: {
            alias: '日期'
          },
          errNum: {
            alias: '错误次数 '
          }
        },
        color: '#f52d2d',
        events: {
          onColumnClick: function (ev) {
            self.openErrLog(ev.data.date, '')
          }
        }
      })
      this.columnPlot.render()
      this.errPlotData()
    },
    openErrLog (date, apiName) {
      // 打开路由
      var router = {
        name: 'api-apiLog',
        id: '',
        menuId: this.$route.meta.menuId,
        oldName: 'api-apiLog',
        path: 'api/apiLog',
        title: '接口请求日志'
      }
      var params = {
        timestamp: this.$xeutils.timestamp(),
        date: date,
        apiName: apiName,
        apiStatus: false
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    }

  }
}
</script>
<style lang="scss" scoped>
.edp-home {
  &-card {
    &-header {
      &-title {
        font-size: 16px;
        float: left;
        color: #515a6e;
      }

      &-right {
        float: right;
      }
    }

    &-body {
      color: #515a6e;

      > span {
        font-size: 30px;
      }

      &-txt {
        height: 30px;
        padding-top: 8px;
      }
    }

    &-bottom {
      width: autopx;
      height: auto;
    }
  }

  &-module {
    color: #515a6e;

    &-ico {
      text-align: center;
      font-size: 32px;
      color: rgb(105, 192, 255);
    }

    &-name {
      text-align: center;
      padding-top: 20px;
    }
  }

  // ::v-deep .el-card__header {
  //   padding: 10px 10px;
  // }

  // ::v-deep .el-card__body {
  //   padding: 10px 10px;
  // }

  // ::v-deep .el-divider--horizontal {
  //   margin: 5px 0;
  // }
}

.api-body {
  line-height: 2;
}

.api-body .left-text {
  padding-right: 10px;
  text-align: right;
  font-size: 14px;
}

.api-body .right-text {
  font-size: 14px;
  color: #59a2d5;
}
</style>
